<template>
  <div>
    <el-table :data="tableData" v-loading="tableLoading" border style="width: 100%">
      <el-table-column prop="stu_name" label="学生" align="center" header-align="center" />
      <el-table-column prop="cur_name" label="课程" align="center" header-align="center" />
      <el-table-column v-if="activeName === '2'" prop="refund_amount" label="退款金额" align="center" header-align="center" />
      <el-table-column v-if="activeName === '2'" prop="refound_reason" label="退款原因" show-overflow-tooltip align="center"
        header-align="center" />
      <el-table-column v-if="activeName === '7'" prop="delete_reason" label="删除原因" show-overflow-tooltip align="center"
        header-align="center" />
      <el-table-column label="订单状态" align="center" header-align="center">
        <template #default="{ row }">
          <span :style="`color: ${colorObj[row.order_statusCode]}`">
            {{ row.order_statusName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作" align="center" header-align="center">
        <template #default="{ row }">
          <!-- 2： 退款 7： 删除  -->
          <el-button @click="approveOrderFn(row.order_id)" type="text">通过</el-button>
          <el-button @click="rejectOrderFn(row.order_id)" type="text">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { approveOrder, rejectOrder } from '@/api/goodsOrder/approve'
import { defineComponent, reactive, ref, watch } from 'vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Action } from 'vuex'
export default defineComponent({
  props: {
    activeName: {
      type: String,
      default: ''
    },
    tableVal: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit }) {
    const { proxy } = useCurrentInstance()
    const tableData: any = ref([])
    const colorObj = {
      1: '#67c23a', // 绿
      2: '#e6a23c', // 黄
      3: '#409eff', // 蓝
      4: '#909399', // 灰
      5: '#f56c6c', // 红
      6: '#f56c6c', // 深灰
      7: '#0bcadf' // 青色
    }
    const tableLoading = ref(false)

    // 审批通过
    const approveOrderFn = (order_id) => {
      ElMessageBox.confirm(
        '确定确认通过此订单?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          const params = { order_statusCode: Number(props.activeName), order_id }
          tableLoading.value = true
          approveOrder(params).then((res: any) => {
            ElMessage.success(res.message)
            emit('getPageData', false, false)
          }).finally(() => {
            tableLoading.value = false
          })
        })
        .catch(() => { })
    }

    // 审批驳回
    const rejectOrderFn = (order_id) => {
      ElMessageBox.confirm(
        '确定确认驳回此订单?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          const params = { order_statusCode: Number(props.activeName), order_id }
          tableLoading.value = true
          rejectOrder(params).then((res: any) => {
            ElMessage.success(res.message)
            emit('getPageData', false, false)
          }).finally(() => {
            tableLoading.value = false
          })
        })
        .catch(() => { })
    }

    watch(
      () => props.tableVal,
      newVal => {
        tableData.value = newVal
      },
      { deep: true, immediate: true }
    )

    return {
      tableData,
      colorObj,
      tableLoading,
      approveOrderFn,
      rejectOrderFn
    }
  },
})
</script>
